import React from 'react'
import { Text, View, RefreshControl, TouchableOpacity, Image, FlatList } from 'react-native'
import { Metrics, Colors, Fonts } from '../../Themes'
import { API, WINDOW } from '../../Services'
import styles from '../Styles/CommonContainerStyles'
import ProductCell from '../../Components/ProductCell'
import ListViewSeparator from '../../Components/ListViewSeparator'
import { WhiteSpace, SwipeAction } from '@ant-design/react-native';
import { NavigationBar } from '../../Components/CustomNavibar'
import { SearchBar } from '@ant-design/react-native';
class ProductListScreen extends React.Component {
    page = 1
    data = []
    over = false
    lock = false
    first_flag = false
    constructor(props) {
        super(props)
        this.state = {
            dataSource: [],
            isRefreshing: false,
            viewType: this.props.route?.params?.viewType || null, //1首页分类 2我的 3搜索
            isCollect: this.props.isCollect,


            key: '',


            //服务器暂时不支持  
            is_fangshi: null,
            is_fangshi_value: '类 别',

            //我的发布用到参数
            type:this.props.route?.params?.type || null,
        }
    }

    componentDidMount() {
        this._onRefresh()
        if (this.state.viewType === 3) {
            // this.searchBar.focus()
        }
    }

    componentWillUnmount() {
        if (this.state.viewType === 3) {
            // this.searchBar.unFocus()
        }
    }

    _onRefresh = () => {
        if (this.state.isCollect) {
            return this._fetch_selectFollow()
        }
        let index = this.state.viewType
        if (index === 1) {
            this.props.navigation.setOptions({ title: this.props.route.params.text })
            this._fetch_selectShopList()
        }
        else if (index === 2) {
            let title
            switch (this.state.type) {
                case '卖':
                    title = '我的销售'  
                    break;
                case '买':
                    title = '我的采购'
                    break;
                case '出租':
                    title = '我的出租'
                    break;
                case '求租':
                    title = '我的求租'
                    break;
                default:
            }
            this.props.navigation.setOptions({ title })
            this._fetch_getMylist_shop()
        } else if (index === 3) {
            this.props.navigation.setOptions({ title: '搜索' })
        } else {
            this._fetch_selectShopList()
        }
    }

    //产品列表 
    _fetch_selectShopList() {
         
        const { gparent_id, time } = this.state
        let param = {}
        if (gparent_id != null) {
            param = { ...param, gparent_id }
        }
        if (this.state.is_fangshi != null) {
            param = { ...param, type: this.state.is_fangshi }
        }
        if (this.state.city_id != null) {
            param = { ...param, city_id: this.state.city_id }
        }
        if (this.state.area_id != null) {
            param = { ...param, area_id: this.state.area_id }
        }
        param = { ...param, time }

        this.setState({ isRefreshing: true })
        API.selectShopList(param).then((response) => {
            const { ok, data } = response
            if (ok && (data.code === 1)) {
                this.setState({ dataSource: data.data.data, isRefreshing: false })
            }else{
                WINDOW.showToastError(data.msg || '请求失败！')
                this.setState({ isRefreshing: false })
            }
        })

    }

    // 搜索页面获取数据
    _fetch_search() {
        if (!this.state.key) {
            return
        }
        this.setState({ isRefreshing: true })
        API.selectShopList({ key: this.state.key }).then((response) => {
            const { ok, data } = response
            if (ok && (data.code === 1)) {
                this.setState({ dataSource: data.data.data, isRefreshing: false })
            }else{
                WINDOW.showToastError(data.msg || '请求失败！')
                this.setState({ isRefreshing: false })
            }
        })
    }

    //我的的发布产品 
    _fetch_getMylist_shop() {
        this.setState({ isRefreshing: true })
        API.getMylist_shop(this.state.type).then((response) => {
            const { ok, data } = response
            if (ok && (data.code === 1)) {
                this.setState({ dataSource: data.data.data, isRefreshing: false })
            }else{
                WINDOW.showToastError(data.msg || '请求失败！')
                this.setState({ isRefreshing: false })
            }
        })
    }

    //我的收藏产品列表
    _fetch_selectFollow() {
        this.setState({ isRefreshing: true })
        API.selectFollow().then((response) => {
            const { ok, data } = response
            if (ok && (data.code === 1)) {
                this.setState({ dataSource: data.data.data, isRefreshing: false })
            }else{
                WINDOW.showToastError(data.msg || '请求失败！')
                this.setState({ isRefreshing: false })
            }
        })
    }
 
 

 
 

    _renderHeader = () => {
        if (this.state.viewType === 1) {
            return null
        }
        else if (this.state.viewType === 3) {
            return (
                <SearchBar
                    value={this.state.key}
                    autoFocus
                    placeholder="搜索"
                    onSubmit={() => this._fetch_search()}
                    onChange={(key) => this.setState({ key })}
                    onCancel={() => this.setState({ key: '' })}
                    onBlur={() => this._fetch_search()}
                    showCancelButton
                />
            )
        }
        else {
            return null
        }
    }


    _renderRow({ item }) {
        return (
            <TouchableOpacity onPress={() => this.props.navigation.navigate('ProductDetail', { item })}>
                <ProductCell {...item} />
            </TouchableOpacity>
        )
    }

    _ListEmptyComponent = () =>{
        return(
            <View style={{alignItems:'center',justifyContent:'center',alignSelf:'center',marginTop:180}}>
                <Image source={require('../../Images/zanwudingdan.png')}/>
                <Text style={{ fontSize: 16, color: '#666666',marginTop:20 }}>暂无数据!</Text>
            </View>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.dataSource}
                    ListEmptyComponent={this._ListEmptyComponent}
                    ListHeaderComponent={this._renderHeader}
                    renderItem={this._renderRow.bind(this)}
                    ItemSeparatorComponent={() => <ListViewSeparator />}
                    keyExtractor={(item) => `${item.id}`}
                    onEndReachedThreshold={0.1}
                    onContentSizeChange={() => {
                        this.lock = false // flatview内部组件布局完成以后会调用这个方法
                    }}
                    refreshControl={<RefreshControl
                        onRefresh={this._onRefresh.bind(this)}
                        refreshing={this.state.isRefreshing} />} />
            </View>
        )
    }
}


export default ProductListScreen
